<template>
  <div class="dashboard-container" style="padding: 20px">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="金刚区">
        <el-table :data="tableTop" style="width: 100%">
          <el-table-column prop="" label="排序" width="50" align="center">
            <template v-slot="{ row }">
              <div class="sort-arrows">
                <i
                  class="el-icon-caret-top"
                  @click="moveUp(row.sn, row.id)"
                ></i>
                <i
                  class="el-icon-caret-bottom"
                  @click="moveDown(row.sn, row.id)"
                ></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sn" label="序号" width="200" align="center">
            <!-- <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template> -->
          </el-table-column>
          <el-table-column align="center" prop="prop" label="图片">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.logoUrl"
                :fit="fit"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="logoUrl" label="图标" width="width"> -->
          <!-- <template slot-scope="scope"> -->
          <!-- <img :src="scope.row.logoUrl" alt="" /> -->
          <!-- <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.logoUrl"
              ></el-image> -->
          <!-- </template> -->
          <!-- </el-table-column> -->
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="handelSwitchChange(scope.row.id)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="prop" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="editServer(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delBtn(scope.row.id)"
                >删除</el-button
              >
              <!-- <el-button
                type="primary"
                size="small"
                @click="detailClick(scope.row.id)"
                >详情</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <el-row
          :gutter="10"
          style="margin-top: 20px"
          type="flex"
          justify="space-between"
        >
          <el-col>
            <el-button type="primary" size="small" @click="addServer"
              >添加</el-button
            >
          </el-col>
          <el-col>
            <el-pagination
              background
              @size-change="handleSizeTopChange"
              @current-change="handleCurrentTopChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="topTotal"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- 跳转地址链接 -->
      <el-tab-pane label="跳转地址链接" name="2">
        <el-table :data="tableJumpUrl" style="width: 100%">
          <el-table-column align="center" prop="id" label="ID" width="50">
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="显示名称"
            width="width"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="ifParameter"
            label="类型"
            width="width"
          >
            <template slot-scope="scope">
              {{ scope.row.ifParameter ? "参数" : "无参" }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="prop" label="转跳类型">
            <template slot-scope="scope">
              <div v-if="scope.row.jumpType === 1">导航栏</div>
              <div v-else-if="scope.row.jumpType === 2">普通页面</div>
              <div v-else>H5</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="jumpUrl" label="页面路径">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="创建时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="prop" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                @click="editBtn(scope.row)"
                >编辑</el-button
              >
              <el-button
                icon="el-icon-delete"
                size="small"
                @click="delBtnJunmp(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row
          :gutter="10"
          style="margin-top: 20px"
          type="flex"
          justify="space-between"
        >
          <el-col>
            <el-button type="primary" size="small" @click="addAddressLink"
              >新增</el-button
            >
          </el-col>
          <el-col>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹层 -->
    <addTopService :addServerDialog.sync="addServerDialog" />
    <!-- 编辑弹层 -->
    <editTopService
      ref="editTopServiceRef"
      :editTopServiceDialog.sync="editTopServiceDialog"
    />

    <!-- 顶部详情 -->
    <el-dialog title="顶部详情" :visible.sync="detailDialog" width="35%">
      <div>
        <el-form ref="detailFormRef" :model="detailForm" label-width="80px">
          <el-form-item label="内容名称" prop="name">
            <el-input
              disabled
              v-model="detailForm.name"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="类别" prop="pageUrlId">
            <el-select
              v-model="detailForm.pageUrlId"
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in tableTop"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务类型">
            <el-select
              disabled
              v-model="detailForm.serveType"
              placeholder="请输入跳转类型"
            >
              <el-option label="底部导航栏" :value="1"></el-option>
              <el-option label="首页轮播图" :value="2"></el-option>
              <el-option label="首页小图标" :value="3"></el-option>
              <el-option label="招聘会轮播图" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转参数" prop="parameter">
            <el-input
              v-model="detailForm.parameter"
              disabled
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="链接地址" prop="externalJumpUrl">
            <el-input
              v-model="detailForm.externalJumpUrl"
              disabled
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="detailDialog = false">取 消</el-button>
        <el-button @click="detailDialog = false" type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 新增跳转地址 -->
    <el-dialog title="新增" :visible.sync="addAddressLinkDialog" width="35%">
      <div>
        <el-form
          ref="addAddressJumpLink"
          :model="addPageUrl"
          :rules="addRules"
          label-width="80px"
        >
          <el-form-item label="显示名称" prop="name">
            <el-input
              v-model="addPageUrl.name"
              placeholder="请输入显示名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="ifParameter">
            <el-select
              v-model.number="addPageUrl.ifParameter"
              placeholder="请选择"
            >
              <el-option label="无参数" :value="0"></el-option>
              <el-option label="参数" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="页面路径" prop="jumpUrl">
            <el-input
              v-model="addPageUrl.jumpUrl"
              placeholder="请输入页面路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="转跳类型" prop="jumpType">
            <el-radio-group
              v-model="addPageUrl.jumpType"
              @change="handleChange"
            >
              <el-radio :label="1">导航栏</el-radio>
              <el-radio :label="2">普通页面</el-radio>
              <el-radio :label="3">H5</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addAddressLinkDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改跳转页面 -->
    <el-dialog title="编辑" :visible.sync="editAddressLinkDialog" width="35%">
      <div>
        <el-form
          ref="editAddressJumpLink"
          :model="editPageUrl"
          :rules="editRules"
          label-width="80px"
        >
          <el-form-item label="显示名称" prop="name">
            <el-input
              v-model="editPageUrl.name"
              placeholder="请输入显示名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="ifParameter">
            <el-select
              v-model.number="editPageUrl.ifParameter"
              placeholder="请选择"
            >
              <el-option label="无参数" :value="0"></el-option>
              <el-option label="参数" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="页面路径" prop="jumpUrl">
            <el-input
              v-model="editPageUrl.jumpUrl"
              placeholder="请输入页面路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="转跳类型" prop="jumpType">
            <el-radio-group
              v-model="editPageUrl.jumpType"
              @change="handleChange"
            >
              <el-radio :label="1">导航栏</el-radio>
              <el-radio :label="2">普通页面</el-radio>
              <el-radio :label="3">H5</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="editAddressLinkDialog = false">取 消</el-button>
        <el-button type="primary" @click="editBtnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selServeListApi,
  delTopByIdApi,
  selTopByIdApi,
  selPageUrlListApi,
  delPageUrlByIdApi,
  addPageUrlApi,
  updatePageUrlByIdApi,
  updateServeStatusByIdApi,
} from "@/api/Jingang_District";
import addTopService from "@/views/Jingang_District/components/addTopService";
import editTopService from "@/views/Jingang_District/components/editTopService";
export default {
  components: {
    addTopService,
    editTopService,
  },
  data() {
    return {
      // 顶部区域查询
      parasmQuery: {
        page: 1,
        pageSize: 10,
        // keyType: 1,
        // keyword: "",
      },
      // 跳转地址链接查询
      selPageUrlQuery: {
        page: 1,
        pageSize: 10,
      },
      // 新增跳转链接地址
      addPageUrl: {
        name: "",
        ifParameter: null,
        jumpUrl: "",
        jumpType: 1,
      },
      // 编辑跳转链接地址
      editPageUrl: {
        name: "",
        ifParameter: null,
        jumpUrl: "",
        jumpType: 1,
      },
      total: "",
      topTotal: "",
      detailForm: {},
      tableTop: [],
      tableJumpUrl: [],
      type: "",
      addServerDialog: false,
      editTopServiceDialog: false,
      detailDialog: false,
      addAddressLinkDialog: false,
      editAddressLinkDialog: false,
      // 新增校验
      addRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        ifParameter: [
          { required: true, message: "请选择参数", trigger: "change" },
        ],
        jumpUrl: [
          { required: true, message: "请输入页面路径", trigger: "blur" },
        ],
        jumpType: [
          { required: true, message: "请选择转跳类型", trigger: "change" },
        ],
      },
      // 编辑校验
      editRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        ifParameter: [
          { required: true, message: "请选择参数", trigger: "change" },
        ],
        jumpUrl: [
          { required: true, message: "请输入页面路径", trigger: "blur" },
        ],
        jumpType: [
          { required: true, message: "请选择转跳类型", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.selServeList();
    // this.selPageUrlList()
    // this.selPageUrlList()
  },
  watch: {},
  methods: {
    // 选择页面页数
    // async selPageUrlList(pageSize) {
    //   console.log(pageSize);
    //   this.selPageUrlQuery.pageSize = pageSize;
    //   const res = await selPageUrlListApi(this.selPageUrlQuery);
    //   console.log(res);
    //   this.tableJumpUrl = res.records;
    // },
    // 选择页面页数
    handleSizeTopChange(pageSize) {
      console.log(pageSize);
      this.parasmQuery.pageSize = pageSize;
      this.selServeList();
    },
    // 选中页面当前页
    handleCurrentTopChange(page) {
      console.log(page);
      this.parasmQuery.page = page;
      this.selServeList();
    },
    // 选中页面当前页
    async handleCurrentChange(page) {
      console.log(page);
      this.selPageUrlQuery.page = page;
      const res = await selPageUrlListApi(this.selPageUrlQuery);
      console.log(res);
      this.tableJumpUrl = res.records;
    },
    // 状态改变
    async handelSwitchChange(id) {
      try {
        const res = await updateServeStatusByIdApi(id);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("修改成功!");
          this.selServeList();
        } else {
          this.$message.error("修改失败");
        }
      } catch {
        this.$message.error("修改失败");
      }
    },
    // 编辑
    editBtn(row) {
      console.log(row);
      Object.assign(this.editPageUrl, {
        id: row.id,
        ifParameter: row.ifParameter,
        jumpType: row.jumpType,
        jumpUrl: row.jumpUrl,
        name: row.name,
      });
      this.editAddressLinkDialog = true;
    },
    // 编辑确定
    editBtnOk() {
      this.$refs.editAddressJumpLink.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.editPageUrl);
            const res = await updatePageUrlByIdApi(this.editPageUrl);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("编辑成功!");
              const res = await selPageUrlListApi(this.selPageUrlQuery);
              console.log(res);
              this.tableJumpUrl = res.records;
              this.editAddressLinkDialog = false;
            } else {
              this.$message.error("编辑失败");
            }
          } catch {
            this.$message.error("编辑失败");
          }
        }
      });
      // console.log(this.editPageUrl);
    },
    // 新增确定
    btnOk() {
      this.$refs.addAddressJumpLink.validate(async (valid) => {
        if (valid) {
          try {
            const res = await addPageUrlApi(this.addPageUrl);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("新增成功!");
              const res = await selPageUrlListApi(this.selPageUrlQuery);
              console.log(res);
              this.tableJumpUrl = res.records;
              this.addAddressLinkDialog = false;
            } else {
              this.$message.error("新增失败");
            }
          } catch {
            this.$message.error("新增失败");
          }
        }
      });
    },
    handleChange(e) {
      console.log(e);
    },
    // 新增跳转地址链接
    addAddressLink() {
      this.addAddressLinkDialog = true;
    },
    // 删除跳转链接
    delBtnJunmp(id) {
      this.$confirm("此操作将永久删除该地址链接, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            console.log(id);
            const res = await delPageUrlByIdApi(id);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              // this.selServeList();
              const res = await selPageUrlListApi(this.selPageUrlQuery);
              console.log(res);
              this.tableJumpUrl = res.records;
              this.total = res.total;
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 金刚区列表渲染
    async selServeList() {
      const res = await selServeListApi(this.parasmQuery);
      console.log(res);
      this.tableTop = res.records.map((item) => ({
        ...item,
        status: item.status ? true : false,
      }));
      console.log(this.tableTop);
      this.topTotal = res.total;
    },
    // 点击tab切换事件
    async handleClick(tab, event) {
      console.log(tab);
      if (tab.index === "1") {
        const res = await selPageUrlListApi(this.selPageUrlQuery);
        console.log(res);
        this.tableJumpUrl = res.records;
        this.total = res.total;
      }
    },
    // 新增
    addServer() {
      this.addServerDialog = true;
    },
    // 编辑
    editServer(row) {
      this.editTopServiceDialog = true;
      row.jumpUrl = row.externalJumpUrl;
      console.log(row);
      this.$refs.editTopServiceRef.formData = row;
      this.$refs.editTopServiceRef.fileList = [{ url: row.logoUrl }];
    },
    // 删除
    delBtn(id) {
      this.$confirm("此操作将永久删除该服务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delTopByIdApi(id);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.selServeList();
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            // this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击详情
    async detailClick(id) {
      console.log(id);
      this.detailDialog = true;
      const res = await selTopByIdApi(id);
      console.log(res);
      this.detailForm = res.data;
    },
  },
};
</script>

<style scoped>
.sort-arrows {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none; /* 防止用户选择文本 */
}
.sort-arrows i {
  margin: 2px; /* 根据需要调整间距 */
}
</style>
